<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <title>GARMOR</title>
      <!-- don't forget to paste your page title! -->
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta name="description" content="" />
      <meta name="author" content="" />
      <!-- Le styles -->
      <!-- bootstrap framework styles -->
      <link href="css/bootstrap.css" rel="stylesheet" />
      <!-- fancybox lightbox clone plugin styles -->
      <link href="css/fancybox.css" rel="stylesheet" />
      <!-- icomoon icons font  -->
      <link href="css/icomoon.css" rel="stylesheet" />
      <!-- sequence slider styles -->
      <!--[if lt IE 8]>
      <link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs_ie.css" />
      <![endif]-->
      <link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs.css" />
      <!-- main template styles -->
      <link href="css/styles.css" rel="stylesheet" />
      <!-- place for your custom styles -->
      <link href="css/mystyle.css" rel="stylesheet" />
      <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
      <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
   </head>
   <body class="">
      <!-- Backround image. Just paste yours. No extra code. Highly recommend to use your own images -->
      <!-- background images by Victor1558 under CC BY 2.0 license -> http://www.flickr.com/photos/76029035@N02/ -->
      <img src="img/bg14.jpg" id="bg_main" alt="" />
      <!--recommended image dimentions 1200x800px with weight under 120kb 
         !note! don't use very light images. It can damage readability of the white text -->
      <div class="container">
         <!-- Main navigation -->
         <div class="row">
            <div class="span12">
               <div class="navbar">
                  
               </div>
            </div>
         </div>
         <!-- /Main navigation -->
         <header class="page_title">
            <h3>Particulares: Obra en Apodaca (Pueblo Nuevo) 2009</h3>
         </header>
         <div class="row">
            <div class="span6">
               <div class="block">
                  <!-- slideshow area -->
                  <div id="myCarouselBefore" class="carousel slide">
                     <div class="carousel-inner">
                        <div class="item active">
                           <img src="img/proj2img1.png" alt="" class="img_project" />
                           <div class="carousel-caption">
                              <p>Antes</p>
                           </div>
                        </div>
                     </div>
                  </div>

                  <!-- /slideshow area -->
               </div>
            </div>
            <div class="span6">
               <div class="block">
                  <!-- slideshow area -->
                  <div id="myCarouselAfter" class="carousel slide">
                     <div class="carousel-inner">
                        <div class="item active">
                           <img src="img/apodaca.jpg" alt="" class="img_project"/>
                           <div class="carousel-caption">
                              <p>Despu&eacute;s</p>
                           </div>
                        </div>
                     </div>
                  </div>
                  
                  <!-- /slideshow area -->
               </div>
            </div>
            <div class="span12">
               <ul class="pager">
                  <li><a href="project1.html">&larr; Anterior</a></li>
                  <li><a href="project3.html">Siguiente &rarr;</a></li>
               </ul>
               <div class="box block">
                  <h4>Descripción del proyecto</h4>
                  <p>El proyecto consisti&oacute; en apoyo en la localización del punto de construcci&oacute;n y revisión del area. Construcción Total abarcando: obra gris, fachada, piso,  y pintura. Así como apoyo en la administración y coordinación relacionada con otros proveedores y constructora.
                  </p>
               </div>
            </div>
         </div>
         <section class="main">
            <!-- main footer -->
            <footer class="main">
               <div class="row">
                  <div class="span8">
                     <!-- footer main nav -->
                    <nav>
                        <ul>
                           <li><a href="index.html">Inicio</a></li>
                           <li><a href="projects.html">Proyectos</a></li>
                           <li><a href="clients.html">Clientes</a></li>
                           <li><a href="about.html">Nosotros</a></li>
                           <li><a href="services.html">Servicios</a></li>
                           <li><a href="catalog.html">Cat&aacute;logo</a></li>
                           <li><a href="contact.html">Contacto</a></li>
                        </ul>
                     </nav>
                  </div>
                  <div class="span4">
                     <small>Copyright © <a href="index.html">Garmor</a> 2012</small>
                  </div>
               </div>
            </footer>
         </section>
      </div>
      <!-- /container --><!-- Le javascript
         ================================================== -->
      <!-- Placed at the end of the document so the pages load faster -->
      <script src="js/jquery.js"></script>
      <!-- Bootstrap Framework script -->
      <script src="js/bootstrap.js"></script>
      <script> $(function() { $('.carousel').carousel() }); </script>
      <script type="text/javascript">
         $("[rel=tooltip]").tooltip();
      </script>
      <!-- plugin for background images -->
      <script src="js/bg_image.js"></script>
      <!-- Fancybox plugin -->
      <script type="text/javascript" src="js/fancybox.js"></script>
      <script type="text/javascript" src="js/navbar.js"></script>
      <script type="text/javascript">
         $(".portfolio").addClass('active');
      </script>
      <script type="text/javascript">
         $(document).ready(function() {
         	/*
         	*   Examples - images
         	*/
         
         	$("a#example1").fancybox({
         		'padding'		    : '0',
         		'transitionIn'	: 'fade',
         		'transitionOut'	: 'fade',
         		'overlayColor' : '#000',
         		'showNavArrows' : false,
         		'titlePosition'		: 'outside',
         		'overlayOpacity' : 0.7,
         		'width'		: 960,
         		'height' : 540
         
         	});
         
         	$("a#example2").fancybox({
         		'overlayShow'	: false,
         		'transitionIn'	: 'elastic',
         		'transitionOut'	: 'elastic'
         	});
         
         	$("a#example3").fancybox({
         		'transitionIn'	: 'none',
         		'transitionOut'	: 'none'	
         	});
         
         	$("a#example4").fancybox({
         		'opacity'		: true,
         		'overlayShow'	: false,
         		'transitionIn'	: 'elastic',
         		'transitionOut'	: 'none'
         	});
         
         	$("a#example5").fancybox();
         
         	$("a#example6").fancybox({
         		'titlePosition'		: 'outside',
         		'overlayColor'		: '#000',
         		'overlayOpacity'	: 0.9
         	});
         
         	$("a#example7").fancybox({
         		'titlePosition'	: 'inside'
         	});
         
         	$("a#example8").fancybox({
         		'titlePosition'	: 'over'
         	});
         
         	$("a[rel=example_group]").fancybox({
         		'padding'		    : '0',
         		'transitionIn'	: 'fade',
         		'transitionOut'	: 'fade',
         		'overlayColor' : '#000',
         		'showNavArrows' : true,
         		'titlePosition'		: 'outside',
         		'overlayOpacity' : 0.7
         
         	});
         
         	/*
         	*   Examples - various
         	*/
         
         	$("#various1").fancybox({
         		'titlePosition'		: 'inside',
         		'transitionIn'		: 'none',
         		'transitionOut'		: 'none'
         	});
         
         	$("#various2").fancybox();
         
         	$("#various3").fancybox({
         		'width'				: '75%',
         		'height'			: '75%',
         		'autoScale'			: false,
         		'transitionIn'		: 'none',
         		'transitionOut'		: 'none',
         		'type'				: 'iframe'
         	});
         
         	$("#various4").fancybox({
         		'padding'			: 0,
         		'autoScale'			: false,
         		'transitionIn'		: 'none',
         		'transitionOut'		: 'none'
         	});
         });
      </script><!-- plugin for twitter display -> http://tweet.seaofclouds.com/ -->
      <!-- I am using envato twitter acount as the demo. Don't forget paste yours -->
      <script type="text/javascript" src="js/tweet.js"></script>
      <script type="text/javascript">
         //settings for the sidebar twitter area
         jQuery(function($){
           $(".twitter").tweet({
             join_text: "auto",
             username: "envato", //!paste here your twitter username!
             count: 3,
             auto_join_text_default: " we said, ",
             auto_join_text_ed: " we ",
             auto_join_text_ing: " we were ",
             auto_join_text_reply: " we replied ",
             auto_join_text_url: " we were checking out ",
             loading_text: "loading tweets..."
           });
         });
         
      </script>
      <!-- Plugin for responsive video -> http://fitvidsjs.com/ -->
      <script src="js/fitvids.js"></script>
      <script>
         $(".container").fitVids();
         $(".container").fitVids({ customSelector: "iframe[src^='http://socialcam.com']"});  
      </script>
      <!-- Script for goolge maps on contact page -->
      <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
      <script src="js/gmaps.js"></script>
      <script type="text/javascript">
         $(function(){
           $('#map').gmap3({
             marker:{
               address: "Haltern am See, Weseler Str. 151" //place Your address here
             },
             map:{
               options:{
                 zoom: 14
               }
             }
           });
         });
      </script>
      <!-- Sequence slider plugin -->
      <script type="text/javascript" src="js/sequence.jquery-min.js"></script>
      <script type="text/javascript">	
         /mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function () {
           if (!pageYOffset) window.scrollTo(0, 1);
         }, 1000);
         
         $(document).ready(function(){
         	var options = {
         		autoPlay: true,
         		nextButton: true,
         		prevButton: true,
         		animateStartingFrameIn: true,
         		autoPlayDelay: 3000,
         		transitionThreshold: 500
         	};
         
         	var sequence = $("#sequence").sequence(options).data("sequence");
         
         	sequence.afterLoaded = function(){
         		$("#nav").fadeIn(100);
         		$("#nav li:nth-child("+(sequence.settings.startingFrameID)+") img").addClass("active");
         	}
         
         	sequence.beforeNextFrameAnimatesIn = function(){
         		$("#nav li:not(:nth-child("+(sequence.nextFrameID)+")) img").removeClass("active");
         		$("#nav li:nth-child("+(sequence.nextFrameID)+") img").addClass("active");
         	}
         	
         	$("#nav li").click(function(){
         		if(!sequence.active){
         			$(this).children("img").removeClass("active").children("img").addClass("active");
         			sequence.nextFrameID = $(this).index()+1;
         			sequence.goTo(sequence.nextFrameID);
         		}
         	});
         });
      </script>
   </body>
</html>